import React, { useCallback, useMemo, useState } from 'react';
import { Input } from 'antd';
import { useTranslation } from 'react-i18next';
import FileSelect from './FileSelect';
import VideoPreviewUrl from '@/components/VideoPreviewUrl';
import AgentService from '@/modules/Agent';
import useSyncState from '../hooks/useSyncState';
import { appendToken } from '@/utils/index';

interface SendVideoProps {
	onChangeSendVideo?: (e: any) => void;
	errorMessage?: string;
}

const SendVideo = (props: SendVideoProps) => {
	const { t } = useTranslation();
	const { onChangeSendVideo, errorMessage } = props;
	const [url, setUrl] = useSyncState<string>('');

	const changeHandler = (value: number) => {
		console.log(value);
		const video = AgentService.getAllVideoFiles().find(item => item.id === value);
		console.log(video);

		if (video) {
			setUrl(video.url);
			onChangeSendVideo && onChangeSendVideo(video);
		}
	};

	const playVideo = useCallback(() => {
		if (!url()) return null;
		return <VideoPreviewUrl url={appendToken(url())}></VideoPreviewUrl>;
	}, [url()]);

	return (
		<div className="send-video-contanier">
			{/* <Input placeholder={t('input-link-video') as string} className="send-video-input" maxLength={200} bordered={false} onChange={e => onChangeSendVideo && onChangeSendVideo(e)} /> */}
			<FileSelect options={AgentService.getAllVideoFiles()} placeholder={t('select-video-placeholder') || ''} changeHandler={changeHandler}></FileSelect>
			{playVideo()}
			{errorMessage ? <p className="error-message">{errorMessage}</p> : undefined}
		</div>
	);
};

export default SendVideo;
